import React, { Component } from 'react';

class Life extends Component {
  constructor() {
    // 初始化
    console.log('1-constructor');
    super();
    this.state = {

    }
    this.showHi()
  }
  // Derived: 派生
  // getDerivedStateFromProps：根据props修改state
  static getDerivedStateFromProps(props) {
    console.log('2-getDerivedStateFromProps');
    // 一定要返回对象，这个对象会修改state，如果不想修改就返回null
    return {
      age: props.info
    }
  }
  showHi() {
    console.log('Hi~');
  }
  componentDidMount() {
    // 渲染成功
    console.log('4-componentDidMount');
    // http  在这个函数中发请求
  }
  // 组件是否更新?有的场景下，只需要更新数据，不用更新页面，可以节省性能
  shouldComponentUpdate() {
    // 返回true就执行render函数，返回false就不执行
    return true
  }
  // 更新前获取组件快照（状态）
  getSnapshotBeforeUpdate() {
    return 'Snapshot'
  }
  // 组件更新完成
  componentDidUpdate(oldP, oldS, val) {
    console.log(oldP, oldS, val);
    console.log(this.props);
    console.log(this.state);
  }
  componentWillUnmount() {
    // 组件即将销毁-清除定时器、事件监听等
    console.log('componentWillUnmount');
  }
  render() {
    console.log('3-render');
    return (
      <div>
        <p>生命周期</p>
        <p>我的年龄：{this.state.age}</p>
      </div>
    );
  }
}

export default Life;
